import React from 'react';
import {Card, Button} from "antd";

import './Notice.less';

const data = [{id: '1001', title: '渭南市大荔县5000亩地出租'},
  {id: '1001', title: '渭南市大荔县5000亩地出租渭南市大荔县5000亩地出租'},
  {id: '1001', title: '渭南市大荔县5000亩地出租'},
  {id: '1001', title: '渭南市大荔县5000亩地出租'},
  {id: '1001', title: '渭南市大荔县5000亩地出租'},
  {id: '1001', title: '渭南市大荔县5000亩地出租'},
];

export default class Notice extends React.Component {

  static defaultProps = {
    data: data,
  }

  render() {
    return (
      <Card 
        className="flex"
        title="通知公告" extra={
        <Button
          onClick={() => this.props.onMorePress && this.props.onMorePress()}
          className='notice-extra-button'>更多</Button>}>
        <div className="flex notice-container">
          {
            this.props.data.map((item, index) => {
              return (
                <div
                  key={index}
                  onClick={() => this.props.onItemClick && this.props.onItemClick(item)}
                  className="notice-item flex-box">
                  <div className="notice-item-dot"/>
                  <span
                    className="notice-item-text">{item.title.length < 20 ? item.title : item.title.substring(0, 17) + '...'}</span>
                  {index === 0 && <div className="notice-item-text-new">new</div>}
                </div>
              )
            })
          }
        </div>

      </Card>
    )
  }
}
